<template>
  <ul id="nav">
      <div class="navPlace">
        <span class="appname"><i class="iconfont icon-trendingup"></i>Campus<span class="appnameSpecial">Care</span></span>
        <div class="navInfo">
          <li><a @click="loadview()" v-link="{ path: '/app/overView' }">概览</a></li> 
          <li><a @click="loadview()" v-link="{ path: '/app/processCenter' }">流程中心</a></li> 
          <li><a @click="loadview()" v-link="{ path: '/app/applicationCenter' }">应用中心</a></li> 
          <li><a @click="loadview()" v-link="{ path: '/app/industryAnalyse' }">行业分析报告</a></li> 
        </div>
      </div>
  </ul>
  <div id="main" class="main">
    <router-view></router-view>
  </div>
  <footer class="text-center footer">2016@江苏金智教育信息股份有限公司</footer>
</template>
<script>
import { changeKind,changeMsg } from '../../vuex/action'
export default {
  vuex: {
    getters: {
      kind(state) {
        return state.kind
      },
      msg(state){
        return state.msg
      }
    },
    actions: {
      changeKind: changeKind,
      changeMsg:changeMsg
    }
  },
  methods: {
    loadview: function() {
      this.changeKind('all');
      this.changeMsg("1");
    }
  },
  ready() {
     
  }
}
</script>
<style scoped>
  .appname{
    font-size: 18px;
  }
  ol, ul ,li {
    list-style:none
  } 
  img {
    border: 0;
    vertical-align:middle
  } 
  a {
    color:#000000;
    text-decoration:none
  }  
  a:hover {
    color:#BA2636
  }
  ul#nav { 
    width:100%; 
    height:60px; 
    /*background:#00A2CA;*/
    margin:0 auto;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/  
    background:#2ACDCF; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(left, #769ADC, #2ACDCF);  
    background:-webkit-gradient(linear, 0 0, right bottom, from(#769ADC), to(#2ACDCF));  
    background:-o-linear-gradient(left, #769ADC, #2ACDCF);
  }
  ul#nav div.navPlace {
    margin: 0 auto;
    width: 65%;
    min-width: 1132px;
    max-width: 1440px;
  }
  ul#nav div.navPlace div li {
    display:inline; 
    height:60px
  } 
  ul#nav div.navPlace div li a {
    display:inline-block; 
    padding:0 20px; 
    height:60px; 
    line-height:60px; 
    color:#FFF; 
    border-bottom: 4px solid transparent;
    font-size:16px
  } 
  ul#nav div.navPlace div li a:hover {
    border-bottom: 4px solid #30efec;
  }
  ul#nav div.navPlace div.navInfo {
    float: right;
  }
  span.appname {
    float: left;
    height: 60px;
    vertical-align: middle;
    line-height: 60px;
    color: #fff;
  }
  span.appname span.appnameSpecial {
    color: #33E8E9;
  }
  div.main {
    width: 65%;
    margin: 0 auto;
    min-width: 1132px;
    max-width: 1440px;
  }
  .appname i{
    font-size: 20px;
    vertical-align: middle;
    margin-right: 16px;
  }
  ul#nav div.navPlace div.navInfo .v-link-active{
    border-bottom: 4px solid #30efec;
  }
  footer{
  margin-top: 32px;
  color: #999999;
  margin-bottom: 24px;
  }
</style>
